<template>
	<div id="app">
		<div class="xq">
			<div class="z" @click="fn"><span class="iconfont icon-right-angle-copy"></span></div>
			<van-notice-bar left-icon="volume-o" scrollable  text="在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。"/>
			<div class="y" @click="funb"><span class="iconfont icon-sandian"></span></div>
		</div>
		<div class="banner">
			<Carousel></Carousel>
			<Details></Details>
			<div class="guige">
				<div class="yixuan" @click="yx">
					<div class="yixuanLeft">已选</div>
					<div class="numZjian">1件</div>
					<div class="iconJian"><span class="iconfont icon-icon"></span></div>
				</div>
				<div class="dizhi" >
					<div>送至</div>
					<div>
						<p>陕西省西安市雁塔区丈八路立人科技</p>
						<p class="pp">有货</p>
					</div>
					<div><span class="iconfont icon-icon"></span></div>
				</div>
			</div>
		</div>
		<Fenxiang ref="zi"></Fenxiang>
		<!-- 规格 -->
			<van-sku
			v-model="show"
			ref="yx"
			:sku="sku"
			:goods="goods"
			:goods-id="goodsId"
			:quota="quota"
			:quota-used="quotaUsed"
			:hide-stock="sku.hide_stock"
			:message-config="messageConfig"
			@buy-clicked="onBuyClicked"
			@add-cart="onAddCartClicked"
			/>
		<Shopping></Shopping>
	</div>
</template>

<script>
import Carousel from "../components/Carousel.vue"
import Details from "../components/Details.vue"
import Shopping from "../components/Shopping.vue"
import Fenxiang from "../components/fenxiang.vue"
	export default {
		name:"Particulars",
		data:function(){
			return{
				show:false,
				sku:{
					tree: [
					{
					k: '颜色', // skuKeyName：规格类目名称
					k_s: 's1', // skuKeyStr：sku 组合列表（下方 list）中当前类目对应的 key 值，value 值会是从属于当前类目的一个规格值 id
						v: [
						{
							id: '1', // skuValueId：规格值 id
							name: '红色', // skuValueName：规格值名称
							imgUrl: 'https://img.yzcdn.cn/1.jpg', // 规格类目图片，只有第一个规格类目可以定义图片
							previewImgUrl: 'https://img.yzcdn.cn/1p.jpg', // 用于预览显示的规格类目图片
						},
						{
							id: '1',
							name: '蓝色',
							imgUrl: 'https://img.yzcdn.cn/2.jpg',
							previewImgUrl: 'https://img.yzcdn.cn/2p.jpg',
						}
						],
					largeImageMode: true, //  是否展示大图模式
					}
					],
					// 所有 sku 的组合列表，比如红色、M 码为一个 sku 组合，红色、S 码为另一个组合
					list: [
					{
						id: 2259, // skuId
						s1: '1', // 规格类目 k_s 为 s1 的对应规格值 id
						s2: '1', // 规格类目 k_s 为 s2 的对应规格值 id
						price: 100, // 价格（单位分）
						stock_num: 110 // 当前 sku 组合对应的库存
					}
					],
					price: '1.00', // 默认价格（单位元）
					stock_num: 227, // 商品总库存
					collection_id: 2261, // 无规格商品 skuId 取 collection_id，否则取所选 sku 组合对应的 id
					none_sku: false, // 是否无规格商品
					messages: [
						
					],
					hide_stock: false // 是否隐藏剩余库存
				},
				goods:{
					
				},
				quota:{
					
				},
				goodsId:{
					
				},
				quotaUsed:{
					
				}
			}
		},
		components:{
			Carousel,Details,Shopping,Fenxiang
		},
		methods:{
			fn(){
				this.$router.go(-1)
			},
			funb(){
				this.$refs.zi.showShare=true
			},
			yx(){
				this.$refs.yx.show=true
			}
		}
	}
</script>

<style scoped>
	#app{
		width: 100%;
		height: 100vh;
		display: flex;
		flex-direction: column;
	}
	.banner{
		width: 100%;
		overflow-y: auto;
		flex: 1;
	}
	.xq{
		width: 100%;
		height: 0.48rem;
		background-color:#fff;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 0.1rem;
		box-sizing: border-box;
		position: fixed;
		top: 0;
		opacity: 1;
		z-index: 1;
	}
	.xq .z,.xq .y{
		width: 0.3rem;
		height: 0.3rem;
		position: relative;
		border-radius: 50%;
		background-color: pink;
		color: #fff;
		background-color: rgba(178, 178, 177, .7);
	}
	.xq .icon-right-angle-copy{
		font-size: 0.18rem;
		position: absolute;
		top: 50%;
		left: 12%;
		transform: translateY(-50%);
	}
	.xq .icon-sandian{
		font-size: 0.25rem;
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		left: 8%;
	}
	.van-notice-bar{
		width: 70%;
		height: 0.34rem;
		line-height: 0.3rem;
		font-size: 0.13rem;
		color: #ED6A0C;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	/* 规格 */
	.guige{
		width: 100%;
		height: 1.21rem;
		background-color: #EDEDED;
	}
	.guige .yixuan,.guige .dizhi{
		height: 0.6rem;
		background-color:#fff ;
		display: flex;
		align-items: center;
		justify-content: space-around;
	}
	.yixuan .yixuanLeft,.yixuan .numZjian,.yixuan .iconJian,.guige .dizhi div:nth-of-type(1),.guige .dizhi div:nth-of-type(3){
		line-height: 0.6rem;
	}
	.yixuan .yixuanLeft,.guige .dizhi div:nth-of-type(1){
		width: 20%;
		font-family: "楷体";
		font-weight: bold;
		padding-left: 0.1rem;
		box-sizing: border-box;
	}
	.yixuan .numZjian,.guige .dizhi div:nth-of-type(2){
		width: 70%;
		font-size: 0.13rem;
		color: #333;
	}
	.yixuan .iconJian,.guige .dizhi div:nth-of-type(3){
		width: 10%;
		height: 0.6rem;
		text-align: center;
		color: #ccc;
		font-weight: bold;
	}
	/* 地址 */
	.guige .dizhi{
		margin-top: 0.01rem;
	}
	.guige .dizhi div:nth-of-type(2) .pp{
		color:#FF1B1B;
		margin-top: 0.02rem;
	}
	
</style>
